<script setup lang="ts">
</script>

<template>
  <div class="gou-container">
    <div class="h-[58px] flex nav-top">
      <div class="cursor-pointer flex items-center flex-1 justify-center gap-[8px] active">
        <div class="img"></div>
        山高优选
      </div>
      <div class="cursor-pointer flex items-center flex-1 justify-center gap-[8px]">
        <div class="img"></div>
        集中采购
      </div>
      <div class="cursor-pointer flex items-center flex-1 justify-center gap-[8px]">
        <div class="img"></div>
        电商专区
      </div>
      <div class="cursor-pointer flex items-center flex-1 justify-center gap-[8px]">
        <div class="img"></div>
        员工福利
      </div>
    </div>
    <div class="grid grid-cols-4 gap-[24px] px-[24px] pb-[10px] gou-container-content">
      <div class="content-box flex flex-col gap-[10px] items-center justify-center">
        <img src="@/assets/image/product-1.jpg" alt="" />
        <div class="font-16 title">普通混凝土构件--六棱块</div>
        <div class="!text-[#EA5504] font-18 price">￥850元/方</div>
      </div>
      <div class="content-box flex flex-col gap-[10px] items-center justify-center">
        <img src="@/assets/image/product-2.jpg" alt="" />
        <div class="font-16 title">普通混凝土构件--分隔带方砖</div>
        <div class="!text-[#EA5504] font-18 price">￥860元/方</div>
      </div>
      <div class="content-box flex flex-col gap-[10px] items-center justify-center">
        <img src="@/assets/image/product-3.jpg" alt="" />
        <div class="font-16 title">普通混凝土构件--开挖段边沟盖板...</div>
        <div class="!text-[#EA5504] font-18 price">￥1340元/方</div>
      </div>
      <div class="content-box flex flex-col gap-[10px] items-center justify-center">
        <img src="@/assets/image/product-4.jpg" alt="" />
        <div class="font-16 title">普通混凝土构件--梯形边沟盖板</div>
        <div class="!text-[#EA5504] font-18 price">￥850元/方</div>
      </div>
      <div class="content-box flex flex-col gap-[10px] items-center justify-center">
        <img src="@/assets/image/product-5.jpg" alt="" />
        <div class="font-16 title">带钢 Q235B</div>
        <div class="!text-[#EA5504] font-18 price">￥3630元/吨</div>
      </div>
      <div class="content-box flex flex-col gap-[10px] items-center justify-center">
        <img src="@/assets/image/product-6.jpg" alt="" />
        <div class="font-16 title">热轧光圆钢筋  热轧带肋钢筋...</div>
        <div class="!text-[#EA5504] font-18 price">￥163元/根</div>
      </div>
      <div class="content-box flex flex-col gap-[10px] items-center justify-center">
        <img src="@/assets/image/product-7.jpg" alt="" />
        <div class="font-16 title">钢绞线</div>
        <div class="!text-[#EA5504] font-18 price">￥300元/根</div>
      </div>
      <div class="content-box flex flex-col gap-[10px] items-center justify-center">
        <img src="@/assets/image/product-8.jpg" alt="" />
        <div class="font-16 title">钢卷 Q235B</div>
        <div class="!text-[#EA5504] font-18 price">￥3780/吨</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.gou-container {
  height: 875px;
  border-radius: 10px;
  background: linear-gradient(180deg, #d0e7fa 0%, #f6faff 100%);
  display: flex;
  flex-direction: column;
  gap: 10px;

  .nav-top {
    .img {
      width: 16px;
      height: 16px;
      background-image: url("@/assets/image/blueIcon.svg");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    font-size: 20px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0em;
    font-feature-settings: 'kern' on;
    color: rgba(33, 114, 186, 0.65);

    .active {
      background: linear-gradient(270deg, #2c91eb 0%, #2172ba 100%);
      color: #ffffff;

      .img {
        width: 16px;
        height: 16px;
        background-image: url("@/assets/image/whiteIcon.svg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
    }
  }

  .gou-container-content {
    height: calc(100% - 57px);
    overflow: auto;

    .content-box {
      width: 320px;
      height: 385px;
      border-radius: 10px;
      opacity: 1;
      background: #ffffff;
      box-shadow: 0px 4px 10px 0px rgba(13, 58, 176, 0.1);
    }

    img {
      width: 256px;
      height: 266px;
      opacity: 1;
    }

    .title {
      width: 256px;
      height: 23px;
    }
    .price {
      width: 256px;
      height: 26px;
    }
  }
}
</style>
